<script setup>
	import {
		defineProps
	} from 'vue'
	const props = defineProps({
		list: Array
	})
</script>

<template>
	<view class="listNews">
		<view :class="[index % 2 === 0 ? 'row-odd' : 'row-even']" v-for="(item, index) in list" :key="index"
			@click="$emit('listItemClick', item)">
			<view v-if="index % 2 === 0" class="odd">
				<view class="left">
					<image :src="item.imagePath"></image>
				</view>
				<view class="right">
					<view class="column">
						<text>{{ item.title }}</text>
						<text>{{ item.author }}</text>
						<text>{{ item.simple }}</text>
					</view>
				</view>
			</view>
			<view v-else class="even">
				<view class="left">
					<view class="column">
						<text>{{ item.title }}</text>
						<text>{{ item.author }}</text>
						<text>{{ item.simple }}</text>
					</view>
				</view>
				<view class="right">
					<image :src="item.imagePath"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.listNews {
		width: 100%;
		// min-height: 1vh;

		.row-odd {
			// min-height: 12vh;
			margin-top: 2vh;
			border-radius: 4vw;
			background-color: $uni-bg-color;
			padding: 3vw;

			.odd {
				display: flex;
				flex-direction: row;

				.left {
					image {
						width: 12vh;
						height: 12vh;
						border-radius: 2vw;
					}
				}

				.right {
					padding-left: 4vw;

					.column {
						display: flex;
						flex-direction: column;

						text {
							max-width: 56vw;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;

							&:not(:first-child) {
								font-size: 3vw;
								color: #8a8a8a;
							}

							&:nth-child(2) {
								margin: 1vh 0;
							}
						}
					}
				}
			}
		}

		.row-even {
			margin-top: 2vh;
			border-radius: 4vw;
			background-color: $uni-bg-color;
			padding: 3vw;

			.even {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.left {
					.column {
						display: flex;
						flex-direction: column;

						text {
							max-width: 56vw;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;

							&:not(:first-child) {
								font-size: 3vw;
								color: #8a8a8a;
							}

							&:nth-child(2) {
								margin: 1vh 0;
							}
						}
					}
				}

				.right {
					image {
						width: 12vh;
						height: 12vh;
						border-radius: 2vw;
					}
				}
			}
		}
	}
</style>